<template>
  <div class="new">
    <div class="new-left">
        <h3>MANGO新品</h3>
          <img src="../../../../static/images/new2.png" alt="" class="new-left-img">
    </div>
    <div class="new-right">
        <div class="new-right-top">
          <h3>每日精选</h3>
          <span><img src="../../../../static/images/new_01.png" alt="" class="new-right-top-img"></span>
        </div>
        <div class="new-right-bottom">
            <div class="new-right-bottom-left">
              <h3>手工达人</h3>
              <span><img src="../../../../static/images/new_02.png" alt="" class="new-right-bottom-img1"></span>
            </div>
            <div class="new-right-bottom-right">
              <h3>精选男表</h3>
              <span><img src="../../../../static/images/new_03.png" alt="" class="new-right-bottom-img2"></span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  data () {
    return {
      
    }
  }
}
</script>

<style lang="stylus" scoped>
.new 
    margin-top .2rem
    border 1px solid #efefef
    border-bottom 1px solid #efefef
    border-radius .2rem 
    background-color #fff
    position relative
    z-index 999
.new-left
    width 40% 
    border-right 1px solid #efefef
    h3 
        font-size .32rem
        line-height .32rem
        font-weight bold
        padding .2rem .3rem .2rem .5rem
    .new-left-img 
        width 100%
        margin-top .2rem 
        border-bottom-left-radius .2rem
.new-right
    width 60%
    position absolute
    top 0 
    right 0
    height 4rem
    .new-right-top
        // height 2rem
        position relative
        overflow hidden
        border-bottom 1px solid #efefef
        h3 
          font-size .32rem
          line-height .32rem
          font-weight bold
          width 40%
          text-align center
          padding 1rem 0 1rem .1rem
        .new-right-top-img
          width 60%
          padding-bottom 200%
          border-top-right-radius .2rem
          border-bottom 1px solid #efefef
          position absolute 
          top 0
          right 0
    .new-right-bottom
        width 100%
        position relative
        .new-right-bottom-left
            position absolute
            top 0
            left 0
            width 50%
            border-right 1px solid #efefef
            h3 
                font-size .32rem
                line-height .32rem
                text-align center
                font-weight bold
                padding .14rem
            .new-right-bottom-img1
                width 100%
        .new-right-bottom-right 
            position absolute
            top 0
            right 0
            width 50%
            h3 
                font-size .28rem
                line-height .28rem
                text-align center
                font-weight bold
                padding .08rem
            .new-right-bottom-img2
                width 100%
                border-bottom-right-radius .2rem
</style>
